<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="4" class="flex_centen">
                        <span>星球部落</span>
                    </el-col>
                    <el-col :span="15">
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                            router>
                            <el-menu-item v-for="item in menu" :index="item.path">{{ item.meta.name }}</el-menu-item>

                        </el-menu>
                    </el-col>
                    <el-col class="flex_centen" :span="5" style="display: flex; justify-content: space-around;">
                        <el-button>创作</el-button>
                        <el-dropdown>
                            <el-icon size="30">
                                <CreditCard />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>评论</el-dropdown-item>
                                    <el-dropdown-item>关注</el-dropdown-item>
                                    <el-dropdown-item>点赞</el-dropdown-item>
                                    <el-dropdown-item>收藏</el-dropdown-item>
                                    <el-dropdown-item>系统通知</el-dropdown-item>
                                    <el-dropdown-item>私信</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-tooltip content="<div>
        登录网站可获得以下权益
    </div>
    <div><span style='margin-right:10px'>收藏有用网站</span><span>阅读优质专栏</span></div>
     <div><span style='margin-right:10px'>进行评论互动</span><span>提升成长等级</span></div>


    " raw-content>
                            <el-icon size="30">
                                <Avatar />
                            </el-icon>
                        </el-tooltip>
                    </el-col>
                </el-row>
            </el-header>
            <router-view></router-view>
            <el-main></el-main>

        </el-container>
    </div>
</template>
    
<script setup>
import { tabList } from '../router/tabList';
const menu = tabList
</script>
    
<style scoped>
.el-menu--horizontal.el-menu {
    border: none;
}

.flex_centen {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>